<template>
  <div class="ethernet-settings">
    <div class="top-box">
      <v-container fluid>
        <v-row align="center">
          <v-col cols="3" class="d-flex justify-center text-center"></v-col>
          <v-col cols="3" class="d-flex justify-center text-center">
            <div class="config-item">
              系统版本
            </div>
          </v-col>
          <v-col cols="3" class="d-flex justify-center text-center">
            <div class="config-item">
              {{ softwareCurVersion }}
            </div>
          </v-col>
          <v-col cols="1" class="d-flex justify-center text-center" v-if="softwareVersion !== ''">
            <v-tooltip right>
              <template v-slot:activator="{ on }">
                <v-btn v-on="on" text
                       @click="updateSoftware"
                       class="config-item red--text"
                       style="background-color: transparent; border: none; box-shadow: none; padding: 0;text-transform: none">
                  {{ softwareVersion }}
                </v-btn>
              </template>
              <span>点击更新</span>
            </v-tooltip>
          </v-col>
        </v-row>
        <v-row align="center">
          <v-col cols="3" class="d-flex justify-center text-center"></v-col>
          <v-col cols="3" class="d-flex justify-center text-center">
            <div class="config-item">
              发布日期
            </div>
          </v-col>
          <v-col cols="3" class="d-flex justify-center text-center">
            <div class="config-item">
              2024.11.1
            </div>
          </v-col>
        </v-row>
        <v-row align="center">
          <v-col cols="3" class="d-flex justify-center text-center"></v-col>
          <v-col cols="3" class="d-flex justify-center text-center">
            <div class="config-item">
              设备码
            </div>
          </v-col>
          <v-col cols="3" class="d-flex justify-center text-center">
            <div class="config-item">
              {{ sn }}
            </div>
          </v-col>
        </v-row>
        <v-row align="center">
          <v-col cols="3" class="d-flex justify-center text-center"></v-col>
          <v-col cols="3" class="d-flex justify-center text-center">
            <div class="config-item">
              硬件版本
            </div>
          </v-col>
          <v-col cols="3" class="d-flex justify-center text-center">
            <div class="config-item">
              {{ currentVersion }}
            </div>
          </v-col>
          <v-col cols="1" class="d-flex justify-center text-center" v-if="latestVersion !== ''">
            <v-tooltip right>
              <template v-slot:activator="{ on }">
                <v-btn v-on="on" text
                       @click="updateVersion"
                       class="config-item red--text"
                       style="background-color: transparent; border: none; box-shadow: none; padding: 0;text-transform: none">
                  {{ latestVersion }}
                </v-btn>
              </template>
              <span>点击更新</span>
            </v-tooltip>
          </v-col>
        </v-row>
      </v-container>
      <v-dialog v-model="dialog" max-width="400" persistent>
        <v-card>
          <v-card-title>检查版本</v-card-title>
          <v-card-text>
            <div v-if="status === 'checking'" class="text-center">
              <v-progress-circular indeterminate color="primary"></v-progress-circular>
              <div>检查中，请等待</div>
            </div>
            <div v-else-if="status === 'checkFailed'" class="text-center">
              <v-icon large color="red">mdi-close-circle</v-icon>
              <div>设备未连接</div>
            </div>
            <div v-else-if="status === 'updating'" class="text-center">
              <v-progress-circular indeterminate color="primary"></v-progress-circular>
              <div>更新中，请等待</div>
            </div>
            <div v-else-if="status === 'success'" class="text-center">
              <v-icon large color="green">mdi-check-circle</v-icon>
              <div>更新成功</div>
            </div>
            <div v-else-if="status === 'fail'" class="text-center">
              <v-icon large color="red">mdi-close-circle</v-icon>
              <div>更新失败</div>
            </div>
          </v-card-text>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="green darken-1" text @click="dialog = false">关闭</v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </div>
    <div class="bottom-box">
      <v-btn color="primary" @click="checkUpdate">
        检查版本
      </v-btn>
    </div>
  </div>
</template>

<script>
//personal token = e67d8fd8ff41f6aa7cf6f9e6bf3dc887
// import axios from "axios";

export default {
  name: 'EthernetSettingsContent',
  created() {
    const storedSN = localStorage.getItem('sn');
    if (storedSN) this.sn = storedSN;
  },
  mounted() {
  },
  beforeDestroy() {
  },
  data() {
    return {
      softwareCurVersion: '0.1.0-beta.7',
      sn: '暂无信息',
      currentVersion: '暂无版本信息',
      latestVersion: '',
      softwareVersion: '',
      dialog: false,
      status: 'checking',
      downloadUrl: ''
    }
  },
  methods: {
    checkUpdate() {
      this.status = 'checking';
      this.dialog = true;
      // axios.get(`${this.$serverUrl}/api/update`, {
      //   headers: {
      //     "X-Authorization": `Bearer ${localStorage.getItem('token')}`
      //   }
      // })
      //     .then(latestVersionInfo => {
      //       console.log(latestVersionInfo)
      //       this.softwareVersion = latestVersionInfo.data.data.version;
      //       this.downloadUrl = latestVersionInfo.data.data.downloadUrl;
      //     })
      //     .catch(error => {
      //       console.log(error)
      //     })
      const data = {
        "cmd": 249
      };
      window.electronAPI.sendSettings(JSON.stringify(data));
    },
    receiveData(data) {
      this.currentVersion = data.current;
      this.latestVersion = data.latest;
      this.dialog = false;
      console.log(data)
    },
    updateVersion() {
      if (this.currentVersion !== this.latestVersion) {
        const data = {
          "cmd": 250
        }
        window.electronAPI.sendSettings(JSON.stringify(data));
        this.dialog = true
        this.status = 'updating';
      } else alert("已是最新版本");
    },
    updateSoftware() {
      if (this.softwareCurVersion === this.softwareVersion) {
        this.status = 'updating';
        this.dialog = true;
        window.electronAPI.autoUpdate(this.downloadUrl);
      } else alert("已是最新版本")
    }
  }
};
</script>

<style scoped>
.ethernet-settings {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-top: 10vh;
}

.top-box {
  min-width: 500px;
  width: 80vw;
  padding: 20px;
  box-sizing: border-box;
}

.config-item {
  margin-bottom: 10px;
  text-align: center;
}

.bottom-box {
  width: 100%;
  display: flex;
  justify-content: center;
  border-top: 2px solid #ededed;
  padding-top: 20px;
}
</style>
